<template>
  <div>
    <div v-if="!kid">
      <el-steps active="1" finish-status="success" simple style="margin-top: 20px">
        <el-step title="填写课程信息" icon="el-icon-edit"></el-step>
        <el-step title="上传课程内容" icon="el-icon-upload"></el-step>
        <el-step title="提交审核" icon="el-icon-coffee-cup"></el-step>
      </el-steps>
    </div>
    <div style="text-align: left; margin-top: 20px; margin-left: 60px;">
      <el-form ref="form" :model="from" label-width="80px" :rules="rule">

        <el-form-item label="分类:">
          <el-select v-model="xuanzhong" placeholder="请选择" @change="findTwo">
            <el-option :label="oneitem.ct_name" :value="oneitem.ct_id" :key="oneitem.ct_id" v-for="oneitem in region">{{oneitem.ct_name}}</el-option>
          </el-select>

          <el-select v-model="from.courseTypeId" :placeholder="请选择"  v-if="xuanzhong">
            <el-option :label="twoitem.ct_name" :value="twoitem.ct_id" :key="twoitem.ct_id" v-for="twoitem in region1">{{twoitem.ct_name}}</el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="课程名称:" style="width: 300px;">
          <el-input v-model="from.courseName" placeholder="请输入课程名称"></el-input>
        </el-form-item>

        <el-form-item label="课程简介:" style="width: 450px">
          <el-input type="textarea" v-model="from.cJieshao"></el-input>
        </el-form-item>
        <!--<el-form-item label="关键字:" style="width: 400px">-->
          <!--<el-input v-model="from.name" placeholder="请输入课程名称"></el-input>-->
          <!--<span class="ss">*关键字与关键字之间用逗号隔开，长度3-30长度</span>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="描述:" style="width: 400px;">-->
          <!--<el-input v-model="from.name" placeholder="请输入描述"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="是否付费:">
          <el-radio v-model="from.courseisfire" label="0">付费</el-radio>
          <el-radio v-model="from.courseisfire" label="1" @change="freecourse">免费</el-radio>
        </el-form-item>

        <el-form-item label="原价:" style="width: 300px;" v-if="this.from.courseisfire==0 || this.from.courseisfire==''">
          <el-input v-model="from.coursePrice" placeholder="请输入原价格"></el-input>
        </el-form-item>
        <el-form-item label="会员价:" style="width: 300px;" v-if="this.from.courseisfire==0 || this.from.courseisfire==''">
          <el-input v-model="from.courseVprice" value="" placeholder="请输入会员价格"></el-input>
        </el-form-item>

        <el-form-item label="头像：" :inline="true">

          <el-upload
            class="avatar-uploader"
            action="http://localhost:8899/course-person/lecturer/web/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <el-image style="width: 100px; height: 100px;" :src="from.courseImage" v-if="from.courseImage"></el-image>
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>

        </el-form-item>
<!--        v-if="!id"-->

        <el-form-item v-if="kid">
          <el-button type="danger" @click="onSubmit">确认</el-button>
        </el-form-item>
        <el-form-item v-else>
          <el-button type="danger" @click="handleRedirect">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  import qs from 'qs'
export default {
  data() {
    return {
      kid:"",
      active: 0,
      from: {
        courseName: '',
        cJieshao: '',
        courseisfire: '',
        courseTypeId:'',
        coursePrice:0,
        courseVprice:0,
        courseImage: '',
        teacherId:'',
      },
      region1: '',
      region: '',
      fz:'',
      xuanzhong:'',
      xuanzhongerji:'',
      rule: {

      }

    }
  },
  mounted() {
    this.kid = this.$route.query.kid;
    //根据课程kid 去查询当前课程的信息，赋值到input框
    if (this.kid != null && this.kid != '') {
      this.$axios.post("course-person/aaa/course/findbykid/"+this.kid).then(r=>{
          let fz = r.data.obj[0];
          this.from.courseName=fz.course_name;
          this.from.cJieshao=fz.c_jieshao;
          this.fz=fz.course_type_id;
          this.xuanzhongerji=fz.course_type_id;
          this.from.coursePrice=fz.course_price;
          this.from.courseVprice=fz.course_vprice;
          this.from.courseImage=fz.course_image;
          this.from.courseisfire=fz.courseisfire;

          //根据子菜单id去查询对应菜单栏
            if (this.fz != "") {
              this.$axios.post("course-person/aaa/course-type/findpmenu/"+this.fz).then(r=>{
                //alert(JSON.stringify(r.data.obj))
                this.xuanzhong=r.data.obj.ct_id;
                //根据一级再去查二级在映射上
                      this.$axios.post("course-person/aaa/course-type/findTwomenu/"+this.xuanzhong).then(r=>{
                        //alert(JSON.stringify(r.data.obj));
                        this.region1=r.data.obj;
                        this.from.courseTypeId=this.xuanzhongerji;
                      });
              });
            }
            // if (this.fz != "")
      });
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
       alert(JSON.stringify(res))
      this.from.courseImage = res.obj;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },


    handleRedirect() {
      //alert(JSON.stringify(this.from));
      //新增课程的过程，添加到数据库
      this.$axios.post("course-person/aaa/course/addcourse",qs.stringify(this.from)).then(r=>{
       // alert(r.data.obj)
            if (r.data.obj >0 ) {
                this.kid=r.data.obj;
               this.$router.push({
                 path:"/chapterManager",
                 query:{
                   kid :this.kid
                 }
               });
            }else{
              this.$message('添加课程失败！！');
            }
      })




    },
    //修改确认按钮
    onSubmit(){
        //alert(JSON.stringify(this.from));
      //去进行修改课程
      this.$axios.post("course-person/aaa/course/updatecourse/"+this.kid,qs.stringify(this.from)).then(r=>{
            //alert(r.data.obj)
        if (r.data.obj == 1) {
          this.$router.push({
            path:"/luboCourse"
          });
        }else {
          this.$message('修改失败!!!');
        }

      });
    },
    findTwo(){
      //根据一级去查询二级
      //alert(this.from.xuanzhong);
      this.$axios.post("course-person/aaa/course-type/findTwomenu/"+this.xuanzhong).then(r=>{
        this.from.courseTypeId='';
            //alert(JSON.stringify(r.data.obj));
        this.region1=r.data.obj;
      });
    },
    handleAvatarSuccess(res, file) {
      // alert(JSON.stringify(res.obj))
      this.from.courseImage = res.obj;
    },
    freecourse(){
      this.from.coursePrice=0;
      this.from.courseVprice=0;
    }
  },
  created(){
    let uid = sessionStorage.getItem("uid");
    //跟一级菜单赋值
    this.$axios.post("course-person/aaa/course-type/findOnemenu").then(r=>{
          this.region=r.data.obj;
          //alert(JSON.stringify(this.from.region));
    });
    //根据uid去查询tid
    this.$axios.post("/course-person/bbb/teacher/findtid/"+uid).then(r=>{
          //alert(r.data.obj)
      this.from.teacherId=r.data.obj;
    });

  }
}
</script>

<style>
.ss {
  font-size: 12px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.s1 {
  width: 120px;
}

.tt {
  width: 120px;
}
</style>
